<template>
  <div class="my-padded-tb-large animate__animated animate__zoomIn">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached padded segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui blue header">归档</h3>
          </div>
          <div class="right aligned column">
            共 <h3 class="ui orange header my-inline-block">&nbsp;{{total}}&nbsp;</h3> 篇博客
          </div>
        </div>
      </div>

      <div v-for="item in archives">
        <br>
        <h2 class="ui center aligned header">{{item[0]}}</h2>
        <table class="ui selectable table">
          <tbody>
          <tr @click="gotoBlog(blog.id)" v-for="blog in item[1]">
            <td class="left aligned reversed stackable my-cursor-pointer">
              <i class="mini blue circle icon" style="margin-right: 10px"></i>{{blog.title}}
              <div class="ui blue basic left pointing label my-padded-tiny">{{blog.createTime.split(" ")[0]}}</div>
            </td>
            <td class="right aligned reversed stackable">
              <a @click="gotoType(blog.typeId)" class="ui blue basic label my-padded-tiny">{{blog.type}}</a>
              <a @click="gotoTag(blog.tagIds[index])" v-for="(tag, index) in blog.tags" class="ui blue basic left pointing label my-padded-tiny">{{tag}}</a>
              <div class="ui orange basic left pointing label my-padded-tiny">
                {{blog.flag == 0 ? '原创' : blog.flag == 1 ? '转载' : blog.flag == 2 ? '翻译' : '其他'}}
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
  import {getArchives} from "../api/archives";

  export default {
    name: "Archives",
    data () {
      return {
        archives: {},
        total: 0,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
      }
    },
    created() {
      getArchives().then(res => {
        if (res.code === 200) {
          this.archives = Object.entries(res.data)
          this.archives.forEach((valve, index) => {
            valve[0] = Number(valve[0])
            this.total = this.total + valve[1].length
            // 设置每个博客的分类信息
            valve[1].forEach(value => {
              this.typeList.forEach(value1 => {
                if (value.typeId === value1.id) {
                  value.type = value1.name
                }
              })
            })
            // 设置每个博客的标签信息
            valve[1].forEach(value => {
              let arr = []
              this.tagList.forEach(tagValue => {
                value.tagIds.forEach(value1 => {
                  if (tagValue.id === value1) {
                    arr.push(tagValue.name)
                  }
                })
              })
              arr.reverse()
              value.tags = arr
            })
          })

          this.archives.sort((a,b) => {
            return a[0] - b[0]
          })
        }
      })
    },
    methods: {
      gotoBlog(id) {
        this.$router.push({name:'Blog',params:{blogId:id}})
      },
      gotoTag(tagId) {
        this.$router.push({name:'Tags',params:{tagId:tagId}})
      },
      gotoType(typeId) {
        this.$router.push({name:'Types',params:{typeId:typeId}})
      },
    }
  }
</script>

<style scoped>

</style>
